<template>
    <view class="belongList">
        <uni-nav-bar fixed left-icon="left" @clickLeft="backHandle" title="归属记录" class="unibarS">
        </uni-nav-bar>
        <view class="list" v-if="list.length">
            <view class="trends" v-for="item in list" :key="item.id">
                <view class="trends-name">
                    <view class="trends-avatar">
                        <u-avatar class="avatar" size="40" :src="item.avatar"></u-avatar>
                        <text>{{ item.userName }}</text>
                    </view>
                    <view class="trends-customer">
                        <u-icon name="clock" color="#677585" size="20"></u-icon>
                        <text>{{ item.createTime }}</text>
                    </view>
                </view>
                <view class="trends-describe">
                    <text class="trends-describe-title">操作人员：</text>
                    <text class="trends-describe-content">{{ item.createUserName }}</text>
                </view>
                <view class="trends-describe">
                    <text class="trends-describe-title">原来归属：</text>
                    <text class="trends-describe-content">{{ item.frontUserName || '---' }}</text>
                </view>
                <view class="trends-describe">
                    <text class="trends-describe-title">保护截止：</text>
                    <text class="trends-describe-content">{{ item.endtTime }}</text>
                </view>
                <view class="trends-describe">
                    <text class="trends-describe-title">保护起始：</text>
                    <text class="trends-describe-content">{{ item.startTime }}</text>
                </view>
            </view>
            <uni-load-more :status="status" />
        </view>
        <empty-view v-else />
    </view>
</template>

<script>
import { convertToDict } from '@/common/utils'
export default {
    data() {
        return {
            // 跟进类型
            bus_followup: [],
            bus_reminder_method: null,
			params: {
				pageNum: 1,
				pageSize: 20
			},
			total: 0,
			status: 'loading',
			refresh: false,
			list: [],
            customerId: null
        }
    },
    onLoad(options) {
        // 跟进类型
        this.bus_followup = JSON.parse(uni.getStorageSync('bus_followup_type'))
        this.bus_followup_type = convertToDict(this.bus_followup)
		if(options.customerId) {
            this.customerId = options.customerId
            this.getData()
        }
	},
    onReachBottom() {
		console.log('上拉加载onReachBottom')
		if (this.status == 'noMore' || this.status == 'loading') return
		this.params.pageNum = this.params.pageNum + 1
		this.status = 'loading'
		this.getData()
	},
    methods: {
        getData() {
			this.$http.get('/app/customer/belongToRecord/' + this.customerId, this.params).then(res => {
				if (res.code == 200) {
					this.list = [...this.list, ...res.rows]
					this.total = res.total
					if (this.total > this.list.length) {
						console.log('有更多数据')
						this.status = 'more'
					} else {
						console.log('没更多数据')
						this.status = 'noMore'
					}
					if (this.refresh) {
						uni.stopPullDownRefresh()
					}
				} else {
					uni.$u.toast(res.msg)
				}
			})
		},
        backHandle() {
            uni.navigateBack()
        }
    }
}
</script>

<style lang="scss" scoped>
.trends {
    border-radius: 24rpx;
    background: rgba(255, 255, 255, 1);
    margin-top: 20rpx;
    padding: 24rpx;

    .trends-name {
        display: flex;
        align-items: center;
        justify-content: space-between;
        // margin-bottom: 28rpx;
        padding-bottom: 24rpx;
        border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
        .trends-avatar {
            flex: 1;
            display: flex;
            align-items: center;
            text {
                margin-left: 16rpx;
                font-size: 30rpx;
                font-weight: 500;
                color: rgba(12, 16, 25, 1);
            }

        }
        .trends-customer {
            display: flex;
            margin-left: 20rpx;
            // max-width: 300rpx;
            text-align: right;
            font-size: 28rpx;
            font-weight: 400;
            color: rgba(103, 117, 133, 1);
            > text {
                margin-left: 12rpx;
            }
        }
    }

    .trends-describe {
        display: flex;
        margin-top: 28rpx;
        .trends-describe-title {
            width: 140rpx;
            font-size: 28rpx;
            font-weight: 400;
            color: rgba(103, 117, 133, 1);
        }
        .trends-describe-content {
            flex: 1;
            font-size: 28rpx;
            font-weight: 500;
            color: rgba(12, 16, 25, 1);
        }
    }
}
</style>